<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">
	
<ui:define name="headIncludes">
	<f:event listener="#{contaPagarBean.initialize}" type="preRenderView"/>
</ui:define>
	
	<ui:define name="pageName">Consultar Contas a Pagar</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Nova" style="height:28px;"  action="#{contaPagarBean.changeToNew}" icon="ui-icon-plus"/>
	</ui:define>

	<ui:define name="content">	
		<p:panel>
			<div>
				<p:messages autoUpdate="true"/>	
				<h:panelGrid columns="9">
					<h:outputText value="Filtrar por:" />
									
					<p:inputText id="inputSearchFilterCod" style="width:100px;" value="#{contaPagarBean.filterId}" maxlength="20" title="Nº do documento"
						onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonContaPagar').click(); }">
						<pe:keyFilter regEx="/[\d]/" />
					</p:inputText>
					<p:watermark value="Nº do documento" for="inputSearchFilterCod"/>
					
					<p:inputText id="inputSearchFilter" style="width:300px;" title="Fornecedor" maxlength="100"
						onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonContaPagar').click(); }" value="#{contaPagarBean.filter}"/>
					<p:watermark value="Fornecedor" for="inputSearchFilter"/>
					
					<p:calendar id="inputSearchFilterData" value="#{contaPagarBean.filterDataVencimento}" navigator="true"
						showButtonPanel="true" locale="pt_BR" pattern="dd/MM/yyyy" title="Data de vencimento"
						onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonContaPagar').click(); }"/>
					<p:watermark value="Data de vencimento" for="inputSearchFilterData"/>
				
					<p:commandButton value="Consultar" style="height:28px;" id="searchButtonContaPagar" update="@form" actionListener="#{contaPagarBean.fillByFilter}" icon="ui-icon-search"/>
				</h:panelGrid>
			
				<div style="padding-top:10px;">
					<p:dataTable var="conta" value="#{contaPagarBean.contas}"
						paginator="true" rows="10" paginatorPosition="bottom"
						emptyMessage="Não há registros" id="tableContasPagar">
						  
				        <p:column headerText="Nº" width="60" style="text-align:center;">  
				            <h:outputText value="#{conta.id}" />  
				        </p:column>  
				        
				         <p:column headerText="Descrição" style="text-align:center;" width="40">  
				            <h:outputText value="#{of:abbreviate(conta.descricao, 20)}" />  
				        </p:column>  
				         
				        <p:column headerText="Fornecedor" style="text-align:center;">  
				            <h:outputText value="#{of:abbreviate(conta.fornecedor.nome, 70)}" />  
				        </p:column> 
				  
				        <p:column headerText="Data de emissão" style="text-align:center;" width="80">  
				            <h:outputText value="#{conta.dataEmissao}">
								<f:convertDateTime pattern="dd/MM/yyyy"/>
							</h:outputText>  
				        </p:column> 
				        
				        <p:column headerText="Data de vencimento" style="text-align:center;" width="80">  
				            <h:outputText value="#{conta.dataVencimento}">
								<f:convertDateTime pattern="dd/MM/yyyy"/>
							</h:outputText>  
				        </p:column>   
				        
				        <p:column headerText="Valor" style="text-align:center;" width="100">  
				            <h:outputText value="#{conta.valor}">
				    			<f:convertNumber pattern="R$ #,###,##0.00" />
				    		</h:outputText>     
				        </p:column>
				        
				        <p:column headerText="Status" width="60" style="text-align:center;">
				        	<h:outputText value="#{conta.status}"/>
				        </p:column>
				        
				        <p:column headerText="" width="10">
							<p:commandButton icon="ui-icon-search"
								style="width: 24px; height: 24px;" action="#{contaPagarBean.changeToDetail(conta.id)}" title="Visualizar"/>
						</p:column>
			  	  </p:dataTable>
				</div>
			</div>
		</p:panel>				 
	</ui:define>
</ui:composition>